<template>
  <div class="app-container">
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="地图" name="first" v-loading="loading">
        <!--地图-->
        <KeySitesMap v-if="completeRefreshKeySite==true" :allListData="siteDataList" :siteResult="siteResult" :showHideDivType="showHideDivType" @showHideUploadDiv="showHideUploadDiv" @showHideQueryDiv="showHideQueryDiv" @showDetailId="showDetailId"></KeySitesMap>
        <!--上传面板-->
        <div v-if="showHideUploadDivBool" class="new-uploadDiv">
          <div class="new-uploadDiv-inner">
            <el-form :model="uploadParams" label-position="right" label-width="82px">
              <el-form-item label="省" prop="province">
                <el-select v-model="uploadParams.province" placeholder="请选择" @change="chooseProvince" clearable value-key="name">
                  <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市" prop="city">
                <el-select v-model="uploadParams.city" placeholder="请选择" @change="chooseCity" clearable value-key="name">
                  <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区/县" prop="county">
                <el-select v-model="uploadParams.county" placeholder="请选择" @change="chooseCounty" clearable value-key="name">
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="new-fileBtn">
              <input type="file" @change="uploadFileChange" style="width: 70px;" id="keyplace-button-selectfile" multiple="multiple" accept=".shp,.dbf,.prj,.sbn,.sbx,.shp.xml,.shx" />
            </div>
            <div class="new-fieldInfoBtn">
              <a @click="showFieldDialog"><h5>字段说明</h5></a>
            </div>
            <div class="new-filesTextArea">
              <el-input type="textarea" :rows="10" placeholder="导入多个文件时，文件名须相同" v-model="textarea" readonly></el-input>
            </div>
            <div class="new-uploadBtnDiv">
              <el-button @click="uploadFileClick" type="primary">上传</el-button>
            </div>
            <div class="new-closeBtnDiv">
              <el-button @click="showHideUploadDiv(false)">关闭</el-button>
            </div>
          </div>
        </div>
        <!--上传结果弹窗-->
        <el-dialog title="系统信息" v-model="uploadInfoVisible" width="30%" :before-close="uploadHandleClose">
          <p v-html='uploadMsg' class="new-dialog-content"></p>
          <p class="new-dialog-footer">
            <el-button type="primary" @click="uploadHandleClose">关闭</el-button>
          </p>
        </el-dialog>
        <!--查询面板-->
        <div v-if="showHideQueryDivBool" class="new-queryDiv">
          <div class="new-queryDiv-inner">
            <el-form :model="queryParams" label-position="right" label-width="82px">
              <el-form-item label="省" prop="province">
                <el-select v-model="queryParams.province" placeholder="请选择" @change="chooseProvince" clearable value-key="name">
                  <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市" prop="city">
                <el-select v-model="queryParams.city" placeholder="请选择" @change="chooseCity" clearable value-key="name">
                  <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区/县" prop="county">
                <el-select v-model="queryParams.county" placeholder="请选择" @change="chooseCounty" clearable value-key="name">
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="建筑物编号" prop="number">
                <el-input placeholder="请输入内容" v-model="queryParams.number" clearable></el-input>
              </el-form-item>
              <el-form-item label="建筑物名称" prop="name">
                <el-input placeholder="请输入内容" v-model="queryParams.name" clearable></el-input>
              </el-form-item>
            </el-form>
            <div class="new-queryBtnDiv">
              <el-button @click="queryClick" type="primary">查询</el-button>
            </div>
            <div class="new-closeBtnDiv">
              <el-button @click="showHideQueryDiv(false)">关闭</el-button>
            </div>
          </div>
        </div>
        <!--字段说明-->
        <el-dialog title="字段说明" v-model="fieldInfoVisible">
          <div style="padding:20px;">
            <el-table :data="fieldInfoData">
              <el-table-column property="number" label="序号" width="55"></el-table-column>
              <el-table-column property="type" label="数据类型" width="100"></el-table-column>
              <el-table-column property="require" label="是否必填" width="100"></el-table-column>
              <el-table-column property="name" label="数据名称" width="200"></el-table-column>
              <el-table-column property="example" label="数据说明"></el-table-column>
            </el-table>
          </div>
        </el-dialog>
        <!--下方查询结果面板-->
        <div v-if="queryTable" class="new-queryResultDiv">
          <div class="new-queryTableBtn">
            <el-button @click="confirmQueryTable" type="primary">确认</el-button>
            <el-button @click="closeQueryTable" type="primary">关闭</el-button>
            <el-button @click="deleteClick" type="primary">删除</el-button>
          </div>
          <div class="new-queryTableDiv">
            <el-table ref="multipleTable" :data="siteDataList" tooltip-effect="dark" height="200px"
                      @selection-change="handleSelectionChange" stripe :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
              <el-table-column type="selection" width="50"> </el-table-column>
              <el-table-column property="ssNumber" label="建筑物编号" width="170">
                <template #default="scope">
                <span @click="handleDetil(scope.row.ssId)" style="color: #409eff; cursor: pointer;">{{
                    scope.row.ssNumber
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column property="ssProvince" label="省" width="140"></el-table-column>
              <el-table-column property="ssCity" label="市" width="140"></el-table-column>
              <el-table-column property="ssCounties" label="区（县）" width="140"></el-table-column>
              <el-table-column property="ssLongitude" label="经度" width="120"></el-table-column>
              <el-table-column property="ssLatitude" label="纬度" width="120"></el-table-column>
              <el-table-column property="ssJglx" label="结构类型" width="200"></el-table-column>
              <el-table-column property="ssJzwmc" label="建筑物名称" width="200"></el-table-column>
              <el-table-column property="ssJznd" label="建造年代" width="100"></el-table-column>
              <el-table-column property="ssCs" label="层数" width="80"></el-table-column>
              <el-table-column property="ssCg" label="层高" width="80"></el-table-column>
              <el-table-column property="ssYt" label="用途" width="100"></el-table-column>
              <el-table-column property="ssPlmgzcd" label="平立面规则程度" width="240"></el-table-column>
              <el-table-column property="ssSfbz" label="设防标准" width="160"></el-table-column>
              <el-table-column property="ssWglb" label="屋盖类别" width="100"></el-table-column>
              <el-table-column property="ssZp" label="* 照片" width="100">
                <template #default="scope">
                  <el-link v-if="scope.row.ssZp==null || scope.row.ssZp==''" type="primary" @click="uploadImageZpDialog(scope.row,scope.$index,'上传')">上传图片</el-link>
                  <el-link v-else type="primary" @click="showImageZpDialog(scope.row,scope.$index,'查看')">查看</el-link>
                </template>
              </el-table-column>
              <el-table-column property="ssSgt" label="* 施工图" width="100">
                <template #default="scope">
                  <el-link v-if="scope.row.ssSgt==null || scope.row.ssSgt==''" type="primary" @click="uploadImageSgtDialog(scope.row,scope.$index,'上传')">上传图片</el-link>
                  <el-link v-else type="primary" @click="uploadImageSgtDialog(scope.row,scope.$index,'查看')">查看</el-link>
                </template>
              </el-table-column>
              <el-table-column property="ssXfjhpsj" label="* 小飞机航拍数据/卫星图片" width="200">
                <template #default="scope">
                  <el-link v-if="scope.row.ssXfjhpsj==null || scope.row.ssXfjhpsj==''" type="primary" @click="uploadImageXfjhpsjDialog(scope.row,scope.$index,'上传')">上传图片</el-link>
                  <el-link v-else type="primary" @click="uploadImageXfjhpsjDialog(scope.row,scope.$index,'查看')">查看</el-link>
                </template>
              </el-table-column>
              <el-table-column property="ssJzgztd" label="建构造特点" width="100"></el-table-column>
              <el-table-column property="ssDwmjzj" label="单位面积造价" width="140"></el-table-column>
              <el-table-column property="ssBz" label="备注" width="200"></el-table-column>
            </el-table>
          </div>
        </div>
        <!--右侧查看详情及修改面板-->
        <div v-if="detailResult==true && siteResult!=null" class="new-detailResultDiv">
          <el-form :model="siteResult" :rules="rules" ref="rulesFormResult" label-width="140px">
          <div class="new-detailResultBtn">
            <el-button @click="saveDetailClick" type="primary">提交</el-button>
            <el-button @click="confirmCloseDetailResultDiv" type="primary">关闭</el-button>
            <el-button @click="deleteDetailClick(siteResult.ssId)" type="primary">删除</el-button>
          </div>
          <div class="new-detailContentDiv">
            <table>
              <tr>
                <td>
                  <el-form-item label="省" prop="ssProvince">
                    <el-select v-model="siteResult.ssProvince" placeholder="请选择省" @change="chooseSiteProvince" clearable value-key="name">
                      <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="市" prop="ssCity">
                    <el-select v-model="siteResult.ssCity" placeholder="请选择市" @change="chooseSiteCity" clearable value-key="name">
                      <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="区/县" prop="ssCounties">
                    <el-select v-model="siteResult.ssCounties" placeholder="请选择县" @change="chooseSiteCounty" clearable value-key="name">
                      <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="经度" prop="ssLongitude">
                    <el-input type="number" placeholder="请输入经度" clearable v-model="siteResult.ssLongitude" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="纬度" prop="ssLatitude">
                    <el-input type="number" placeholder="请输入纬度" clearable v-model="siteResult.ssLatitude" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="建筑物编号" prop="ssNumber">
                    <el-input placeholder="请输入建筑物编号" clearable disabled v-model="siteResult.ssNumber" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="建筑物名称" prop="ssJzwmc">
                    <el-input placeholder="请输入建筑物名称" clearable v-model="siteResult.ssJzwmc" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="结构类型" prop="ssJglx">
                    <el-select v-model="siteResult.ssJglx" placeholder="请输入结构类型" clearable>
                      <el-option v-for="item in ssJglxSelectData"
                          :key="item.code" :label="item.name" :value="item.name">
                      </el-option>
                    </el-select>
                    <!--<el-input placeholder="请输入建造年代" clearable v-model="siteResult.ssJglx" />-->
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="建造年代" prop="ssJznd">
                    <el-select v-model="siteResult.ssJznd" placeholder="请输入建造年代" clearable>
                      <el-option v-for="item in ssJzndSelectData"
                                 :key="item.code" :label="item.name" :value="item.name">
                      </el-option>
                    </el-select>
                    <!--<el-input placeholder="请输入建造年代" clearable v-model="siteResult.ssJznd" />-->
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="层数" prop="ssCs">
                    <el-input type="number" placeholder="请输入层数" clearable v-model="siteResult.ssCs" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="层高" prop="ssCg">
                    <el-input type="number" placeholder="请输入层高" clearable v-model="siteResult.ssCg" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="用途" prop="ssYt">
                    <el-input placeholder="请输入用途" clearable v-model="siteResult.ssYt" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="平立面规则程度" prop="ssPlmgzcd">
                    <el-select v-model="siteResult.ssPlmgzcd" placeholder="请输入平立面规则程度" clearable>
                      <el-option v-for="item in ssPlmgzcdSelectData"
                                 :key="item.code" :label="item.name" :value="item.name">
                      </el-option>
                    </el-select>
                    <!--<el-input placeholder="请输入平立面规则程度" clearable v-model="siteResult.ssPlmgzcd" />-->
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="设防标准" prop="ssSfbz">
                    <el-select v-model="siteResult.ssSfbz" placeholder="请输入设防标准" clearable>
                      <el-option v-for="item in ssSfbzSelectData"
                                 :key="item.code" :label="item.name" :value="item.name">
                      </el-option>
                    </el-select>
                    <!--<el-input placeholder="请输入设防标准" clearable v-model="siteResult.ssSfbz" />-->
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="屋盖类别" prop="ssWglb">
                    <el-select v-model="siteResult.ssWglb" placeholder="请输入屋盖类别" clearable>
                      <el-option v-for="item in ssWglbSelectData"
                                 :key="item.code" :label="item.name" :value="item.name">
                      </el-option>
                    </el-select>
                    <!--<el-input placeholder="请输入屋盖类别" clearable v-model="siteResult.ssWglb" />-->
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="照片" prop="ssZp">
                    <el-link type="primary" @click="showImageZpDialog">查看</el-link>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="施工图" prop="ssSgt">
                    <el-link type="primary" @click="showImageSgtDialog">查看</el-link>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="小飞机航拍数据/卫星图片" prop="ssXfjhpsj">
                    <el-link type="primary" @click="showImageXfjhpsjDialog">查看</el-link>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="建构造特点" prop="ssJzgztd">
                    <el-input placeholder="请输入建构造特点" clearable v-model="siteResult.ssJzgztd" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="单位面积造价" prop="ssDwmjzj">
                    <el-input type="number" placeholder="请输入单位面积造价" clearable v-model="siteResult.ssDwmjzj" />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="备注" prop="ssBz">
                    <el-input type="textarea" :rows="10" placeholder="请输入备注" clearable v-model="siteResult.ssBz" />
                    <!--<el-input placeholder="请输入备注" clearable v-model="siteResult.ssBz" />-->
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>
          </el-form>
        </div>
        <!-- 上传|查看照片对话框 -->
        <el-dialog v-model="openImageDialog1" width="820px" :title="imageDialogTitle">
          <p></p>
          <image-upload ref="imageUpload1" :limit="10" v-model="pictureList1" />
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="handleUpload1">确定</el-button>
              <el-button @click="cancelUpload1">取消</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 上传|查看施工图对话框 -->
        <el-dialog v-model="openImageDialog2" width="820px" :title="imageDialogTitle">
          <p></p>
          <image-upload ref="imageUpload2" :limit="10" v-model="pictureList2" />
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="handleUpload2">确定</el-button>
              <el-button @click="cancelUpload2">取消</el-button>
            </div>
          </template>
        </el-dialog>
        <!-- 上传|查看小飞机航拍数据/卫星图片对话框 -->
        <el-dialog v-model="openImageDialog3" width="820px" :title="imageDialogTitle">
          <p></p>
          <image-upload ref="imageUpload3" :limit="10" v-model="pictureList3" />
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="handleUpload3">确定</el-button>
              <el-button @click="cancelUpload3">取消</el-button>
            </div>
          </template>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="keyplace">
//地图
import KeySitesMap from '@/map/security/keyplace/map.vue';
import { getProvince, getChildArea } from "@/api/system/division";
import { getSite, getAllSite, delSite, updateSite, uploadFiles, getAttachmentInfoEntityList } from "@/api/security/keyplace";

const { proxy } = getCurrentInstance();
const activeName = ref("first");
const loading = ref(false);
const showHideUploadDivBool = ref(false);
const showHideQueryDivBool = ref(false);
const showHideDivType = ref("");
const queryTable = ref(false);//是否显示下方查询结果面板
const multipleSelection = ref([]);
const detailResult = ref(false);//是否显示查询详情面板
const fieldInfoVisible = ref(false);//是否显示字段说明
console.log("设置下拉选项数据");
//结构类型下拉选项
const ssJglxSelectData = ref([
  {code:"0",name:"高层结构"},
  {code:"1",name:"钢结构"},
  {code:"2",name:"多层钢筋混凝土结构"},
  {code:"3",name:"砌体结构"},
  {code:"4",name:"砖木结构"},
  {code:"5",name:"土结构"},
  {code:"6",name:"木结构"},
  {code:"7",name:"石结构"},
  {code:"8",name:"其他"}
]);
//建造年代下拉选项
const ssJzndSelectData = ref([
  {code:"0",name:"70s以前"},
  {code:"1",name:"70s"},
  {code:"2",name:"80s"},
  {code:"3",name:"90s"},
  {code:"4",name:"00s"},
  {code:"5",name:"10s"}
]);
//平立面规则程度下拉选项
const ssPlmgzcdSelectData = ref([
  {code:"0",name:"1（平立面均规则）"},
  {code:"1",name:"2（平面规则立面不规则）"},
  {code:"2",name:"3（平面不规则立面规则）"},
  {code:"3",name:"4（平面立面均不规则）"}
]);
//设防标准下拉选项
const ssSfbzSelectData = ref([
  {code:"0",name:"0（未设防）"},
  {code:"1",name:"6（VI度设防）"},
  {code:"2",name:"7（VII度设防）"},
  {code:"3",name:"8（VIII度设防）"},
  {code:"4",name:"9（IX度设防）"}
]);
//屋盖类别下拉选项
const ssWglbSelectData = ref([
  {code:"0",name:"木楼板"},
  {code:"1",name:"现浇楼板"},
  {code:"2",name:"预制板"},
  {code:"3",name:"其他"}
]);

const data = reactive({
  uploadParams: {
    province: "",
    city: "",
    county: "",
    type: "",
  },
  queryParams: {
    province: "",
    city: "",
    county: "",
    number: "",
    name: "",
    fileUuid: "",
    confirm:"1",//1已提交
  },
  siteDataList:[],
  fieldInfoData:[]
});
let {
  uploadParams,
  queryParams,
  siteDataList,
  fieldInfoData
} = toRefs(data);

const provinceData = ref([]); //省
const cityData = ref([]); //市
const areaData = ref([]); //区、县
const textarea = ref("");//上传文件只读显示文本框
const minList = ref([]);//要上传的文件的后缀名数组
const nameList = ref([]);//要上传的文件的文件名数组
const siteResult = ref({});//id查询详情结果
const uploadInfoVisible = ref(false);//是否显示上传消息弹窗
const uploadFileUuid = ref(null);//上传文件UUID
const uploadMsg = ref("");//上传结果返回值
const imageDialogTitle = ref("");//上传|查看图片
const openImageDialog1 = ref(false);//是否显示上传照片对话框
const openImageDialog2 = ref(false);//是否显示上传施工图对话框
const openImageDialog3 = ref(false);//是否显示上传小飞机航拍数据/卫星图片对话框
const pictureList1 = ref(null);//查询照片列表
const pictureList2 = ref(null);//查询施工图列表
const pictureList3 = ref(null);//查询小飞机航拍数据/卫星图片列表
const resultType = ref("查询");//判断查询结果数组是上传还是查询
//数字校验/可输入小数/排除e
const validateAcquaintance = (rule, value, callback) => {
  if (value < 0 ) {
    callback(new Error('请输入大于零的数字!'))
  } else {
    callback()
  }
}

const rules = reactive({
  //ssProvince: [{ required: true, message: "请选择省", trigger: "change" }],
  //ssCity: [{ required: true, message: "请选择市", trigger: "change" }],
  //ssCounties: [{ required: true, message: "请选择区县", trigger: "change" }],
  ssLongitude: [{ required: true, message: "请输入经度", trigger: "blur" },{validator: validateAcquaintance,trigger: 'change'}],
  ssLatitude: [{ required: true, message: "请输入纬度", trigger: "blur" },{validator: validateAcquaintance,trigger: 'change'}],
  ssNumber: [{ required: true, message: "请输入建筑物编号", trigger: "blur" }],
  ssJglx: [{ required: true, message: "请选择结构类型", trigger: "change" }],
  ssJzwmc: [{ required: true, message: "请输入建筑物名称", trigger: "blur" }],
  ssJznd: [{ required: true, message: "请选择建造年代", trigger: "change" }],
  ssCs: [{ required: true, message: "请输入层数", trigger: "blur" },{pattern: /^[1-9]\d*$/,message: '请输入大于0的整数！',trigger: 'change'}],
  ssCg: [{ required: true, message: "请输入层高", trigger: "blur" },{validator: validateAcquaintance,trigger: 'change'}],
  ssYt: [{ required: true, message: "请输入用途", trigger: "blur" }],
  ssPlmgzcd: [{ required: true, message: "请选择平立面规则程度", trigger: "change" }],
  ssSfbz: [{ required: true, message: "请选择设防标准", trigger: "change" }],
  ssWglb: [{ required: true, message: "请输入屋盖类别", trigger: "change" }],
  ssJzgztd: [{ required: true, message: "请输入建构造特点", trigger: "blur" }],
  ssDwmjzj: [{ required: true, message: "请输入单位面积造价", trigger: "blur" },{validator: validateAcquaintance,trigger: 'change'}],
  ssZp: [{ required: true, message: "请上传照片", trigger: "blur" }],
  ssSgt: [{ required: true, message: "请上传施工图", trigger: "blur" }],
  ssXfjhpsj: [{ required: true, message: "请上传小飞机航拍数据/卫星图片", trigger: "blur" }],
  //ssBz: [{ required: true, message: "请输入备注", trigger: "blur" }],
});

//地图传参--start
const completeRefreshKeySite = ref(false);//防止刷新后地图不显示
const showHideUploadDiv = (bool)=>{//显示|隐藏上传面板
  showHideUploadDivBool.value = bool;
  showHideQueryDivBool.value = false;
  if(bool){
    showHideDivType.value = "showUploadDiv";
  }else{
    showHideDivType.value = "";
  }
  //清空上传参数
  clearUploadParams();
}
const showHideQueryDiv = (bool)=>{//显示|隐藏查询面板
  showHideQueryDivBool.value = bool;
  showHideUploadDivBool.value = false;
  if(bool){
    showHideDivType.value = "showQueryDiv";
  }else{
    showHideDivType.value = "";
  }
  //清空查询参数
  clearQueryParams();
}
const showDetailId = (id)=>{//根据ID显示查询详情修改面板
  //根据id查询Site数据
  handleDetil(id);
}
//地图传参--end

//清空上传参数
function clearUploadParams(){
  uploadParams.value.province = null;
  uploadParams.value.city = null;
  uploadParams.value.county = null;
  textarea.value = "";
}

//清空查询参数
function clearQueryParams(){
  queryParams.value.province = null;
  queryParams.value.city = null;
  queryParams.value.county = null;
  queryParams.value.number = "";
  queryParams.value.name = "";
  queryParams.value.fileUuid = "";
  queryParams.value.confirm = "1";//1已提交
}

/** 获取省列表 */
function getProvinceData() {
  console.log("获取省列表");
  getProvince().then((response) => {
    provinceData.value = response.data;
    completeRefreshKeySite.value = true;//显示地图
  });
}
//选择省
function chooseProvince(value) {
  if(showHideUploadDivBool.value){//上传面板
    uploadParams.value.city = null;
    uploadParams.value.county = null;
    uploadParams.value.province = value.name;
  }else if(showHideQueryDivBool.value){//查询面板
    queryParams.value.city = null;
    queryParams.value.county = null;
    queryParams.value.province = value.name;
  }
  cityData.value = [];
  areaData.value = [];
  getChildArea(value.id).then(response => {
    cityData.value = response.data;
  });
}
//选择市
function chooseCity(value) {
  if(showHideUploadDivBool.value){//上传面板
    uploadParams.value.city = value.name;
    uploadParams.value.county = null;
  }else if(showHideQueryDivBool.value){//查询面板
    queryParams.value.city = value.name;
    queryParams.value.county = null;
  }
  areaData.value = [];
  getChildArea(value.id).then((response) => {
    areaData.value = response.data;
  });
}
//选择区县
function chooseCounty(value) {
  if(showHideUploadDivBool.value){//上传面板
    uploadParams.value.county = value.name;
  }else if(showHideQueryDivBool.value){//查询面板
    queryParams.value.county = value.name;
  }
}

//警告消息
function alertMsg(msg){
  proxy.$modal.msgWarning(msg);
}

//选择文件
function uploadFileChange(){
  let uploadinputFiles = document.getElementById("keyplace-button-selectfile").files;
  minList.value = [];
  nameList.value = [];
  let text = "";
  for (let i = 0; i < uploadinputFiles.length; i++){
    console.log("uploading: " + uploadinputFiles[i].name);
    text += uploadinputFiles[i].name+"\n";
    // 获取这个文件的后缀名
    minList.value.push(uploadinputFiles[i].name.slice(uploadinputFiles[i].name.length-3,uploadinputFiles[i].name.length));
    nameList.value.push(uploadinputFiles[i].name.split(".")[0]);
  }
  textarea.value = text;
}

//上传文件
function uploadFileClick(){
  let uploadinput = document.getElementById("keyplace-button-selectfile");
  if (uploadinput.value == "") {
    alertMsg("上传前请先选择文件!");
    return;
  }
  if(!judgeIsOnce(minList.value)){
    alertMsg('上传数量限制:.dbf、.prj、.shp、.shx文件各1个;.sbn、.sbx、.shp.xml文件至多一个。');
    return;
  }else if(!judgeName(nameList.value)){
    alertMsg("文件名请保持一致！");
    return;
  }

  let province = uploadParams.value.province;
  let city = uploadParams.value.city;
  let area = uploadParams.value.county;
  if(province==null){
    province = "";
  }
  if(city==null){
    city = "";
  }
  if(area==null){
    area = "";
  }
  if(province == ""){
    alertMsg("请选择所在省份!");
    return;
  }
  /*if(city == ""){
    alertMsg("请选择所在市!");
    return;
  }*/
  /*if(area == ""){
    alertMsg("请选择所在区县!");
    return;
  }*/
  let formData = new FormData();
  for(let i = 0; i < uploadinput.files.length; i++){
    formData.append('files', uploadinput.files[i]);
  }
  formData.append("province", province);
  formData.append("city", city);
  formData.append("area", area);
  loading.value = true;
  //上传
  uploadFiles(formData).then((response) => {
    nextTick(() => {
      let msg = response.data;
      console.log(msg);
      loading.value = false;
      uploadMsg.value = msg;//上传消息返回值
      resultType.value = "查询";//判断查询结果数组是上传还是查询
      if(msg.indexOf("上传成功.")!=-1) {
        if(msg.indexOf("当前数据所在文件UUID")!=-1) {
          uploadMsg.value = msg.split("当前数据所在文件UUID")[0];
          uploadFileUuid.value = msg.split("当前数据所在文件UUID")[1];
          resultType.value = "上传";//判断查询结果数组是上传还是查询
        }
      }
      uploadFileUuid.value = null;
      if(msg.indexOf("当前数据所在文件UUID")!=-1) {
        uploadFileUuid.value = msg.split("当前数据所在文件UUID")[1];
      }
      uploadInfoVisible.value = true;//是否显示上传消息弹窗
    });
  });
}

//关闭上传消息弹窗
function uploadHandleClose(){
  uploadInfoVisible.value = false;//是否显示上传消息弹窗
  let fileUuid = uploadFileUuid.value;
  showHideUploadDiv(false);//隐藏上传面板
  //根据数据所在文件UUID查询
  queryByFileUuid(fileUuid);
}

//根据数据所在文件UUID查询
function queryByFileUuid(fileUuid){
  console.log("fileUuid"+fileUuid);
  if(fileUuid!=null){
    loading.value = true;
    //清空查询参数
    clearQueryParams();
    //设置文件UUID
    queryParams.value.fileUuid = fileUuid;
    queryParams.value.confirm = "";//查询全部0未提交1已提交
    console.log(queryParams.value);
    getAllSite(queryParams.value).then((response) => {
      nextTick(() => {
        console.log(response.data);
        siteDataList.value = response.data.rows;
        //关闭查看详情面板
        closeDetailResultDiv();
        queryTable.value = true;
        loading.value = false;
        queryParams.value.fileUuid = null;//清空
        queryParams.value.confirm = "1";//查询已提交0未提交1已提交
      });
    });
  }
}

function judgeIsOnce(list) {
  // ["dbf","prj","shp","shx"];
  let dbf = 0;let prj = 0;let shp = 0;let shx = 0;let sbn = 0;let sbx = 0;let xml = 0;
  for(let i=0;i<list.length;i++){
    let item = list[i];
    if(item == 'dbf') dbf++;
    if(item == 'prj') prj++;
    if(item == 'shp') shp++;
    if(item == 'shx') shx++;
    if(item == 'sbn') sbn++;
    if(item == 'sbx') sbx++;
    if(item == 'xml') xml++;
  }
  //if(dbf == 1 && prj == 1 && shp == 1 && shx == 1 && sbn < 2 && sbx < 2 && xml < 2) return true;
  if(dbf == 1 && prj < 2 && shp == 1 && shx == 1) return true;
  else return false;
}
function judgeName(list) {
  let name = list[0];
  let result = list.filter(function (item) {
    return item == name;
  })
  if(result.length == list.length) return true;
  else return false;
}

//查询
function queryClick(){
  loading.value = true;
  let province = queryParams.value.province ? null : "";
  let city = queryParams.value.city ? null : "";
  let area = queryParams.value.county ? null : "";
  let number = queryParams.value.number ? null : "";
  let name = queryParams.value.name ? null : "";
  let fileUuid = queryParams.value.fileUuid ? null : "";
  let confirm = queryParams.value.confirm ? null : "";
  resultType.value = "查询";//判断查询结果数组是上传还是查询
  getAllSite(queryParams.value).then((response) => {
    nextTick(() => {
      console.log(response.data);
      siteDataList.value = response.data.rows;
      //关闭查看详情面板
      closeDetailResultDiv();
      queryTable.value = true;
      loading.value = false;
    });
  });
}

//关闭下方查询结果面板
function closeQueryTable(){
  queryTable.value = false;
}

//确认提交下方查询结果面板（提交）
function confirmQueryTable(){
  //校验
  console.log("确认提交下方查询结果面板（提交）");
  console.log(siteDataList.value);
  let list = siteDataList.value;
  if(list!=null && list.length>0){
    let bool = true;
    for(let i=0;i<list.length;i++){
      let ssConfirm = list[i].ssConfirm;
      if(ssConfirm=="0"){//未提交
        bool = false;
        alertMsg("请先在列表中完成上传图片操作再进行提交!");
        break;
      }
    }
    if(bool){
      //提交
      proxy.$modal
          .confirm("请确认是否完成上传数据的处理？",)
          .then(function () {
            queryTable.value = false;
            detailResult.value = false;
            //清空数据
            siteDataList.value = [];
            siteResult.value = null;
            proxy.$modal.msgSuccess("提交成功");
          })
          .catch(() => {});
    }
  }else{
    alertMsg("无可提交数据!");
  }
}

//删除
function deleteClick(){
  let ids = "";
  let selectRows = multipleSelection.value;
  if(selectRows!=null && selectRows.length>0){
    if(selectRows.length>10){
      alertMsg("最多勾选10条数据进行删除!");
      return;
    }
    for(let i=0;i<selectRows.length;i++){
      if(ids!=""){
        ids += ",";
      }
      ids += selectRows[i].ssId;
    }
    //删除事件
    deleteEvent(ids);
  }
}

//删除事件
function deleteEvent(ids){
  if(ids!="") {
    console.log(ids);
    proxy.$modal
        .confirm("请确认是否要删除？",)
        .then(function () {
          return delSite(ids);
        })
        .then(() => {
          //关闭查看详情面板
          closeDetailResultDiv();
          //查询
          queryClick();
          proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
  }
}

//查询结果多选事件
function handleSelectionChange(val) {
  multipleSelection.value = val;
  console.log(val);
}

//根据id查询Site数据
function handleDetil(id){
  console.log(id);
  getSite(id).then((response) => {
    nextTick(() => {
      console.log(response.data);
      siteResult.value = response.data;
      pictureList1.value = null;
      pictureList2.value = null;
      pictureList3.value = null;
      //获取查询详情面板的省市县信息列表
      getSsProvinceCityCounty();
      //关闭下方查询结果面板
      closeQueryTable();
      detailResult.value = true;
      console.log("ssJglxSelectData.value");
      console.log(ssJglxSelectData.value);
    });
  });
}

//保存提交Site数据
function saveDetailClick(){
  let siteJson = JSON.stringify(siteResult.value);
  console.log(siteJson);
  //校验
  proxy.$refs["rulesFormResult"].validate((vaild) => {
    if (!vaild) {
      alertMsg("校验失败！请检查必填项的数据正确性.");
      return;
    }
    proxy.$modal.confirm('是否确认提交?').then(function () {
      return updateSite(siteJson);
    }).then((response) => {
      console.log(response.data);
      //关闭查看详情面板
      closeDetailResultDiv();
      //查询
      queryClick();
      proxy.$modal.msgSuccess("提交成功");
    }).catch(() => {});
  });
}

//关闭查看详情面板
function closeDetailResultDiv(){
  detailResult.value = false;
  queryTable.value = true;//显示下方查询框
}

//确认关闭查看详情面板
function confirmCloseDetailResultDiv(){
  proxy.$modal.confirm('是否确认不提交数据，直接关闭面板?').then(function () {
    //关闭查看详情面板
    closeDetailResultDiv()
  }).catch(() => {});
}

//删除1条数据
function deleteDetailClick(id){
  //删除事件
  deleteEvent(id);
}

//获取查询详情面板的省市县信息列表
function getSsProvinceCityCounty(){
  let provinceDataList = provinceData.value;
  let province = siteResult.value.ssProvince;
  let city = siteResult.value.ssCity;
  if(provinceDataList!=null && provinceDataList.length>0 && province!=null && province!=""){//获取省
    for(let i=0;i<provinceDataList.length;i++){
      if(province==provinceDataList[i].name){
        getChildArea(provinceDataList[i].id).then(response => {
          cityData.value = response.data;
          let cityDataList = cityData.value;
          if(cityDataList!=null && cityDataList.length>0 && city!=null && city!=""){//获取市
            for(let j=0;j<cityDataList.length;j++){
              if(city==cityDataList[j].name){
                getChildArea(cityDataList[j].id).then((response) => {
                  areaData.value = response.data;//区县列表
                });
                break;
              }
            }
          }
        });
        break;
      }
    }
  }
}

//选择省--查看详情修改面板
function chooseSiteProvince(value) {
  siteResult.value.ssCity = null;
  siteResult.value.ssCounties = null;
  siteResult.value.ssProvince = value.name;
  cityData.value = [];
  areaData.value = [];
  getChildArea(value.id).then(response => {
    cityData.value = response.data;
  });
}
//选择市--查看详情修改面板
function chooseSiteCity(value) {
  siteResult.value.ssCity = value.name;
  siteResult.value.ssCounties = null;
  areaData.value = [];
  getChildArea(value.id).then((response) => {
    areaData.value = response.data;
  });
}
//选择区县--查看详情修改面板
function chooseSiteCounty(value) {
  siteResult.value.ssCounties = value.name;
}

//字段说明表格内容
function setFileInfoTableData(){
  fieldInfoData.value = [
    {number: "1", type: "浮点型", require: "是", name: "经度", example: "示例：116.123563"},
    {number: "2", type: "浮点型", require: "是", name: "纬度", example: "示例：39.986754"},
    {number: "3", type: "文本型", require: "是", name: "结构类型", example: "高层结构、钢结构、多层钢筋混凝土结构、砌体结构、砖木结构、土结构、木结构、石结构、其他"},
    {number: "4", type: "文本型", require: "是", name: "建筑物名称", example: ""},
    {number: "5", type: "文本型", require: "是", name: "建造年代", example: "70s以前、70s、80s、90s、00s、10s"},
    {number: "6", type: "整型", require: "是", name: "层数", example: "单位：层，示例：5"},
    {number: "7", type: "浮点型", require: "是", name: "层高", example: "单位：米，示例：2.3"},
    {number: "8", type: "文本型", require: "是", name: "用途", example: ""},
    {number: "9", type: "文本型", require: "是", name: "平立面规则程度", example: "1（平立面均规则）、2（平面规则立面不规则）3（平面不规则立面规则）、4（平面立面均不规则）"},
    {number: "10", type: "文本型", require: "是", name: "设防标准", example: "0（未设防）、6（VI度设防）、7（VII度设防）、8（VIII度设防）、9（IX度设防）"},
    {number: "11", type: "文本型", require: "是", name: "屋盖类别", example: "木楼板、现浇楼板、预制板、其他"},
    {number: "12", type: "文本型", require: "是", name: "建构造特点", example: ""},
    {number: "13", type: "浮点型", require: "是", name: "单位面积造价", example: "单位：万元/平方米，示例：10.5"},
    {number: "14", type: "文本型", require: "否", name: "备注", example: ""},
  ];
}

//显示字段说明dialog
function showFieldDialog(){
  fieldInfoVisible.value = true;
}

//确定上传照片
function handleUpload1(){
  console.log("pictureList1.value");
  console.log(pictureList1.value);
  console.log(proxy.$refs["imageUpload1"].fileList);
  let fileList = JSON.parse(JSON.stringify(proxy.$refs["imageUpload1"].fileList));
  let attachIds = "";
  for (let i = 0; i < fileList.length; i++) {
    if(i>0){
      attachIds += ",";
    }
    attachIds += fileList[i].attachId;
  }
  siteResult.value.ssZp = attachIds;
  console.log(attachIds);
  openImageDialog1.value = false;
  //是否提交图片
  submitImagesOrNot();
}

//确定上传施工图
function handleUpload2(){
  console.log("pictureList2.value");
  console.log(pictureList2.value);
  console.log(proxy.$refs["imageUpload2"].fileList);
  let fileList = JSON.parse(JSON.stringify(proxy.$refs["imageUpload2"].fileList));
  let attachIds = "";
  for (let i = 0; i < fileList.length; i++) {
    if(i>0){
      attachIds += ",";
    }
    attachIds += fileList[i].attachId;
  }
  siteResult.value.ssSgt = attachIds;
  console.log(attachIds);
  openImageDialog2.value = false;
  //是否提交图片
  submitImagesOrNot();
}

//确定上传小飞机航拍数据/卫星图片
function handleUpload3(){
  console.log("pictureList3.value");
  console.log(pictureList3.value);
  console.log(proxy.$refs["imageUpload3"].fileList);
  let fileList = JSON.parse(JSON.stringify(proxy.$refs["imageUpload3"].fileList));
  let attachIds = "";
  for (let i = 0; i < fileList.length; i++) {
    if(i>0){
      attachIds += ",";
    }
    attachIds += fileList[i].attachId;
  }
  siteResult.value.ssXfjhpsj = attachIds;
  console.log(attachIds);
  openImageDialog3.value = false;
  //是否提交图片
  submitImagesOrNot();
}

//是否提交图片
function submitImagesOrNot(){
  if(imageDialogTitle.value.indexOf("上传")==0){//判断是否上传图片对话框
    let siteJson = JSON.stringify(siteResult.value);
    console.log(siteJson);
    proxy.$modal.confirm('是否确认提交图片?').then(function () {
      return updateSite(siteJson);
    }).then((response) => {
      console.log(response.data);
      if(resultType.value=="查询"){//判断查询结果数组是上传还是查询
        //查询
        queryClick();
      }else if(resultType.value=="上传"){//上传
        let fileUuid = uploadFileUuid.value;
        //根据数据所在文件UUID查询
        queryByFileUuid(fileUuid);
      }
      proxy.$modal.msgSuccess("提交成功");
    }).catch(() => {});
  }else if(imageDialogTitle.value.indexOf("查看")==0){
    //校验
    proxy.$refs["rulesFormResult"].validate((vaild) => {
      //再次校验
    });
  }
}

//取消上传照片
function cancelUpload1(){
  openImageDialog1.value = false;
  pictureList1.value = null;
}

//取消上传施工图
function cancelUpload2(){
  openImageDialog2.value = false;
  pictureList2.value = null;
}

//取消上传小飞机航拍数据/卫星图片
function cancelUpload3(){
  openImageDialog3.value = false;
  pictureList3.value = null;
}

//显示查看照片
function showImageZpDialog(){
  uploadImageZpDialog(siteResult.value,null,null);
}
//显示查看施工图
function showImageSgtDialog(){
  uploadImageSgtDialog(siteResult.value,null,null);
}
//显示查看小飞机航拍数据/卫星图片
function showImageXfjhpsjDialog(){
  uploadImageXfjhpsjDialog(siteResult.value,null,null);
}
//显示上传照片
function uploadImageZpDialog(selectResult,rowIndex,title){
  if(rowIndex!=null){
    //下方的表格的上传图片
  }else{
    //右侧查看详情的图片上传
    title = "查看";
  }
  siteResult.value = selectResult;
  imageDialogTitle.value = title + "照片";
  let ids = siteResult.value.ssZp;
  if(ids==""){
    ids = null;
  }
  getAttachmentInfoEntityList(ids).then((response) => {
    nextTick(() => {
      console.log(response.data);
      pictureList1.value = response.data;
      openImageDialog1.value = true;
    });
  });
}
//显示上传施工图
function uploadImageSgtDialog(selectResult,rowIndex,title){
  if(rowIndex!=null){
    //下方的表格的上传图片
  }else {
    //右侧查看详情的图片上传
    title = "查看";
  }
  siteResult.value = selectResult;
  imageDialogTitle.value = title + "施工图";
  let ids = siteResult.value.ssSgt;
  if(ids==""){
    ids = null;
  }
  getAttachmentInfoEntityList(ids).then((response) => {
    nextTick(() => {
      console.log(response.data);
      pictureList2.value = response.data;
      openImageDialog2.value = true;
    });
  });
}
//显示上传小飞机航拍数据/卫星图片
function uploadImageXfjhpsjDialog(selectResult,rowIndex,title){
  if(rowIndex!=null){
    //下方的表格的上传图片
  }else {
    //右侧查看详情的图片上传
    title = "查看";
  }
  siteResult.value = selectResult;
  imageDialogTitle.value = title + "小飞机航拍数据/卫星图片";
  let ids = siteResult.value.ssXfjhpsj;
  if(ids==""){
    ids = null;
  }
  getAttachmentInfoEntityList(ids).then((response) => {
    nextTick(() => {
      console.log(response.data);
      pictureList3.value = response.data;
      openImageDialog3.value = true;
    });
  });
}

//获取省列表
getProvinceData();
//字段说明表格内容
setFileInfoTableData();

</script>
<style scoped lang="scss">
//上传面板
.new-uploadDiv{
  position:absolute;
  top:16px;
  left:100px;
  width:358px;
  height:456px;
  background-color:#fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.new-uploadDiv-inner {
  position:absolute;
  top:20px;
  left:30px;
  right:30px;
  bottom:0px;
}
.new-fileBtn {
  position: absolute;
  top: 150px;
  left: 0px;
  width: 70px;
}
.new-fieldInfoBtn{
  position: absolute;
  top: 170px;
  left: 0px;
  width: 70px;
  color:#107ce5;
}
.new-filesTextArea{
  position: absolute;
  left: 80px;
  top: 150px;
  right:0px;
  height:200px;
}
.new-uploadBtnDiv {
  position: absolute;
  left: 80px;
  right:0px;
  bottom:20px;
}
.new-closeBtnDiv {
  position: absolute;
  right: 50px;
  bottom:20px;
}
//查询面板
.new-queryDiv{
  position:absolute;
  top:16px;
  left:100px;
  width:358px;
  height:330px;
  background-color:#fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.new-queryDiv-inner {
  position:absolute;
  top:20px;
  left:30px;
  right:30px;
  bottom:0px;
}
.new-queryBtnDiv {
  position: absolute;
  left: 80px;
  right:0px;
  bottom:20px;
}
//下方查询结果面板
.new-queryResultDiv {
  position: absolute;
  left:0px;
  right:0px;
  bottom:0px;
  height:250px;
  background:#fff;
}
.new-queryTableBtn {
  position: absolute;
  left:0px;
  right:0px;
  top:0px;
  height:50px;
  padding:10px;
}
.new-queryTableDiv {
  position: absolute;
  left:0px;
  right:0px;
  top:50px;
  bottom:0px;
}
//查看详情面板
.new-detailResultDiv {
  position: absolute;
  top:0px;
  right:0px;
  bottom:0px;
  width:400px;
  background:#fff;
  overflow: auto;
}
.new-detailResultBtn {
  position: absolute;
  left:0px;
  right:0px;
  top:0px;
  height:50px;
  padding:10px;
}
.new-detailContentDiv {
  position: absolute;
  left:0px;
  right:0px;
  top:50px;
  bottom:0px;
}

.new-photoDiv {

}
.new-dialog-content {

}
.new-dialog-footer {
  text-align: right;
  height:50px;
}
</style>
